<template>
  <div class="table-wrapper">
    <el-table
      v-loading="loading"
      :data="data"
      style="width: 100%"
      :header-cell-style="{
        background: 'transparent',
        color: '#909399',
        fontWeight: '500'
      }"
      v-bind="$attrs"
    >
      <slot />
    </el-table>

    <div class="pagination-container" v-if="showPagination">
      <span class="total-text">共 {{ total }} 条记录</span>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 表格数据
  data: {
    type: Array,
    required: true
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 总条数
  total: {
    type: Number,
    default: 0
  },
  // 是否显示分页
  showPagination: {
    type: Boolean,
    default: true
  },
  // 分页配置
  pagination: {
    type: Object,
    default: () => ({
      page: 1,
      limit: 10
    })
  }
});

const emit = defineEmits(['update:pagination', 'size-change', 'current-change']);

// 计算属性
const currentPage = computed({
  get: () => props.pagination.page,
  set: (val) => {
    emit('update:pagination', { ...props.pagination, page: val });
  }
});

const pageSize = computed({
  get: () => props.pagination.limit,
  set: (val) => {
    emit('update:pagination', { ...props.pagination, limit: val });
  }
});

// 分页方法
const handleSizeChange = (val) => {
  emit('size-change', val);
};

const handleCurrentChange = (val) => {
  emit('current-change', val);
};
</script>

<style lang="scss" scoped>
.table-wrapper {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--el-border-color-lighter);

  :deep(.el-table) {
    .el-table__row {
      td {
        padding: 16px 0;
        border-bottom: 1px solid var(--el-border-color-lighter);
      }

      &:last-child td {
        border-bottom: none;
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--el-border-color-lighter);

    .total-text {
      color: var(--el-text-color-secondary);
      font-size: 13px;
    }
  }
}
</style> 